

<template>
    <ProFormDialog v-model:visible="visible" clickOkClose title="编辑">
        <ProForm :columns="formColumns" :span="8" :btn-position="'center'" ok-text="保存" @ok="submit">
        </ProForm>
    </ProFormDialog>

    <ProFormDialog v-model:visible="visible2" title="编辑">
        <ProForm :columns="formColumns" :span="8" :btn-position="'center'" @ok="submit">
            <template #suffix-btn="{ close }">
                <ElButton @click="close()">关闭</ElButton>
            </template>
        </ProForm>
    </ProFormDialog>
    <ProFormDialog v-model:visible="visible3" :title="formModel3.id > 0 ? '编辑' : '新增'">
        <ProForm :columns="formColumns3" :span="8" :btn-position="'center'" @ok="submit">
            <template #suffix-btn="{ close }">
                <ElButton @click="close()">关闭</ElButton>
            </template>
        </ProForm>
    </ProFormDialog>

    <ElSpace>
        <ElButton @click="visible = true">打开弹窗</ElButton>
        <ElButton @click="visible2 = true">打开弹窗 自定义关闭按钮</ElButton>
    </ElSpace>
    <div><b>根据额外的数据值判断给定弹窗标题</b></div>
    <ElSpace>
        <ElButton @click="openAdd()" type="primary">新增</ElButton>
        <ElButton @click="openEdit()" type="warning">编辑</ElButton>
    </ElSpace>
</template>
<script setup lang="ts">
import 'element-plus/dist/index.css'
import { createProForm, ProForm, ProFormDialog } from '@howuse/element-plus-form'
import { ElButton, ElMessage, ElSpace } from 'element-plus';
import { ref } from 'vue';

const visible = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)

const { formColumns } = createProForm([
    {
        label: "姓名",
        key: "name",
        value: "",
        is: "ElInput",
    },
    {
        label: "年龄",
        key: "age",
        value: "",
        is: "ElInput",
    },
])

const { formColumns: formColumns3, formModel: formModel3, setValue } = createProForm([
    {
        label: "姓名",
        key: "name",
        value: "",
        is: "ElInput",
    },
    {
        label: "年龄",
        key: "age",
        value: "",
        is: "ElInput",
    },
])


function submit(raw) {
    ElMessage.success(JSON.stringify(raw))
}

// 新增
function openAdd() {
    formModel3.value = {
        name: '',
        age: '',
    }
    visible3.value = true
}

// 编辑
function openEdit() {
    formModel3.value = {
        name: '张三',
        age: '100',
        id: 1,
    }
    visible3.value = true
}
</script>